<template>
  <div class="home-container">
    <!-- 顶部信息栏 -->
    <div class="top-bar">
      <div class="top-content">
        <!-- 收货地区选择 -->
        <div class="delivery-area">
          <span>送货至：</span>
          <el-dropdown trigger="hover">
            <span class="location-selector">
              {{ selectedProvince }} <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <div class="location-panel">
                  <h3>请选择所在的收货地区</h3>
                  <div class="province-list">
                    <div class="province-group" v-for="group in provinceGroups" :key="group.letter">
                      <span class="letter">{{ group.letter }}</span>
                      <div class="provinces">
                        <span 
                          v-for="province in group.provinces" 
                          :key="province"
                          @click="selectProvince(province)"
                          class="province-item"
                        >
                          {{ province }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        
        <!-- 用户操作区 -->
        <div class="user-actions">
          <span>你好，请</span>
          <el-link type="primary" @click="goToLogin">登录</el-link>
          <el-link type="danger" @click="goToRegister">免费注册</el-link>
          <span class="divider">|</span>
          <el-link @click="goToOrders">我的订单</el-link>
          <span class="divider">|</span>
          
          <!-- 收藏夹下拉 -->
          <el-dropdown trigger="hover">
            <el-link>收藏夹</el-link>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>我的收藏夹</el-dropdown-item>
                <el-dropdown-item>收藏的店铺</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
          <!-- 客户服务下拉 -->
          <el-dropdown trigger="hover">
            <el-link>客户服务</el-link>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>我要留言</el-dropdown-item>
                <el-dropdown-item>在线客服</el-dropdown-item>
                <el-dropdown-item>帮助中心</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
          <!-- 网站导航下拉 -->
          <el-dropdown trigger="hover">
            <el-link>网站导航</el-link>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>全部商品分类</el-dropdown-item>
                <el-dropdown-item>品牌大全</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
          <span class="divider">|</span>
          <span>关注我们：</span>
          <el-link class="social-link weibo">新浪</el-link>
          <el-link class="social-link wechat">微信</el-link>
          <span class="divider">|</span>
          <el-link>
            手机版 <el-icon><Phone /></el-icon>
          </el-link>
        </div>
      </div>
    </div>

    <!-- 主要头部区域 -->
    <div class="main-header">
      <!-- Logo -->
      <div class="logo-section">
        <router-link to="/home">
          <img src="/src/views/user/images/bk_1.jpg" alt="华信商城" class="logo" />
        </router-link>
      </div>

      <!-- 搜索区域 -->
      <div class="search-section">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入商品名称"
          class="search-input"
          size="large"
        >
          <template #append>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
        <div class="hot-keywords">
          <el-link v-for="keyword in hotKeywords" :key="keyword" @click="searchByKeyword(keyword)">
            {{ keyword }}
          </el-link>
        </div>
      </div>

      <!-- 购物车 -->
      <div class="cart-section">
        <el-badge :value="cartCount" :max="99" class="cart-badge">
          <div class="cart-container" @mouseenter="showCartDropdown = true" @mouseleave="showCartDropdown = false">
            <div class="cart-title">
              <el-icon><ShoppingCart /></el-icon>
              购物车 [ {{ cartCount }} ]
            </div>
            
            <!-- 购物车下拉内容 -->
            <div v-show="showCartDropdown" class="cart-dropdown">
              <!-- 未登录状态 -->
              <div v-if="!isLoggedIn" class="cart-empty">
                还未登录！<el-link type="danger" @click="goToLogin">马上登录</el-link> 查看购物车！
              </div>
              
              <!-- 已登录状态 -->
              <div v-else class="cart-content">
                <div v-if="cartItems.length === 0" class="cart-empty">
                  购物车还是空的，快去挑选心仪的商品吧~
                </div>
                <div v-else>
                  <ul class="cart-items">
                    <li v-for="item in cartItems" :key="item.id" class="cart-item">
                      <div class="item-image">
                        <img :src="item.image" :alt="item.name" />
                      </div>
                      <div class="item-info">
                        <div class="item-name">{{ item.name }}</div>
                        <div class="item-price">
                          <span class="price">￥{{ item.price }}</span> 
                          <span class="quantity">X{{ item.quantity }}</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="cart-summary">
                    <div class="total-price">
                      共计 <span class="price">￥{{ totalPrice }}</span>
                    </div>
                    <el-button type="primary" size="small" @click="goToCart" class="checkout-btn">
                      去购物车结算
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-badge>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="navigation-bar">
      <div class="nav-content">
        <!-- 商品分类 -->
        <div class="category-nav">
          <el-dropdown trigger="hover" placement="bottom-start">
            <div class="category-title">
              <el-icon><Grid /></el-icon>
              全部商品分类
            </div>
            <template #dropdown>
              <el-dropdown-menu class="category-dropdown">
                <div v-for="category in categories" :key="category.id" class="category-item">
                  <el-dropdown-item>
                    <el-icon><component :is="category.icon" /></el-icon>
                    {{ category.name }}
                  </el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <!-- 主导航菜单 -->
        <el-menu mode="horizontal" class="main-nav" background-color="transparent">
          <el-menu-item index="home">
            <router-link to="/home">首页</router-link>
          </el-menu-item>
          <el-menu-item index="food">美食</el-menu-item>
          <el-menu-item index="fresh">生鲜</el-menu-item>
          <el-menu-item index="home-decoration">家居</el-menu-item>
          <el-menu-item index="dress">女装</el-menu-item>
          <el-menu-item index="makeup">美妆</el-menu-item>
          <el-menu-item index="digital">数码</el-menu-item>
          <el-menu-item index="group-buying">团购</el-menu-item>
        </el-menu>

        <!-- 促销信息 -->
        <div class="promotion-banner">
          中秋送好礼！
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 轮播图 -->
        <el-col :span="16">
          <el-carousel :interval="4000" type="card" height="400px" class="main-carousel">
            <el-carousel-item v-for="(banner, index) in banners" :key="index">
              <img :src="banner.image" :alt="banner.title" class="banner-image" />
            </el-carousel-item>
          </el-carousel>
        </el-col>

        <!-- 侧边栏：新闻资讯和话费充值 -->
        <el-col :span="8">
          <div class="sidebar">
            <!-- 新闻资讯 -->
            <el-card class="news-card">
              <template #header>
                <div class="card-header">
                  <span>新闻资讯</span>
                  <el-link type="primary">更多 ></el-link>
                </div>
              </template>
              <ul class="news-list">
                <li v-for="news in newsList" :key="news.id" class="news-item">
                  <el-tag :type="news.type" size="small">{{ news.category }}</el-tag>
                  <el-link @click="viewNews(news)" class="news-title">{{ news.title }}</el-link>
                </li>
              </ul>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { 
  ArrowDown, 
  Phone, 
  ShoppingCart, 
  Grid,
  Food,
  House,
  Female,
  Brush,
  Monitor,
  User
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const selectedProvince = ref('四川')
const searchKeyword = ref('')
const showCartDropdown = ref(false)
const isLoggedIn = ref(false) // 模拟登录状态
const cartCount = ref(3)

// 省份分组数据
const provinceGroups = ref([
  { letter: 'A', provinces: ['安徽', '澳门'] },
  { letter: 'B', provinces: ['北京'] },
  { letter: 'S', provinces: ['四川', '上海', '山东'] },
  // 可以继续添加更多省份
])

// 热门搜索关键词
const hotKeywords = ref(['咖啡', 'iPhone 15', '新鲜美食', '蛋糕', '日用品', '连衣裙'])

// 商品分类
const categories = ref([
  { id: 1, name: '进口食品、生鲜', icon: Food },
  { id: 3, name: '家居用品', icon: House },
  { id: 4, name: '服装配饰', icon: Female },
  { id: 5, name: '美妆护肤', icon: Brush },
  { id: 6, name: '数码家电', icon: Monitor }
])

// 轮播图数据
const banners = ref([
  { image: 'src/views/user/images/bk_1.jpg', title: 'Banner 1' },
  { image: 'src/views/user/images/bk_1.jpg', title: 'Banner 2' },
  { image: 'src/views/user/images/bk_1.jpg', title: 'Banner 3' }
])

// 新闻资讯数据
const newsList = ref([
  { id: 1, category: '特惠', title: '掬一轮明月 表无尽惦念', type: 'danger' },
  { id: 2, category: '公告', title: '好奇金装成长裤新品上市', type: 'info' },
  { id: 3, category: '特惠', title: '大牌闪购 · 抢！', type: 'danger' },
  { id: 4, category: '公告', title: '发福利 买车就抢千元油卡', type: 'info' },
  { id: 5, category: '公告', title: '家电低至五折', type: 'info' }
])

// 购物车商品数据
const cartItems = ref([
  { 
    id: 1, 
    name: '法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只', 
    price: 399, 
    quantity: 1,
    image: 'src/views/user/images/bk_1.jpg'
  },
  { 
    id: 2, 
    name: 'src/views/user/images/bk_1.jpg', 
    price: 599, 
    quantity: 1,
    image: 'src/views/user/images/bk_1.jpg'
  },
  { 
    id: 3, 
    name: '迪奥(Dior)真我香水30ml', 
    price: 460, 
    quantity: 1,
    image: 'src/views/user/images/bk_1.jpg'
  }
])

// 话费充值表单
const rechargeForm = ref({
  phone: '',
  amount: 100
})

const rechargeOptions = ref([
  { label: '100元', value: 100 },
  { label: '50元', value: 50 },
  { label: '30元', value: 30 },
  { label: '20元', value: 20 },
  { label: '10元', value: 10 }
])

const rechargePrice = ref(99.5)

// 计算属性
const totalPrice = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.price * item.quantity, 0)
})

// 方法
const selectProvince = (province) => {
  selectedProvince.value = province
}

const goToLogin = () => {
  router.push('/user/login')
}

const goToRegister = () => {
  router.push('/user/register')
}

const goToOrders = () => {
  router.push('/user/orders')
}

const goToCart = () => {
  router.push('/user/cart')
}

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    console.log('搜索：', searchKeyword.value)
    // 这里可以添加搜索逻辑
  }
}

const searchByKeyword = (keyword) => {
  searchKeyword.value = keyword
  handleSearch()
}

const viewNews = (news) => {
  console.log('查看新闻：', news.title)
  // 这里可以添加新闻详情页面跳转逻辑
}

const updateRechargePrice = () => {
  const discountMap = {
    100: 99.5,
    50: 49.8,
    30: 29.9,
    20: 19.9,
    10: 9.95
  }
  rechargePrice.value = discountMap[rechargeForm.value.amount] || rechargeForm.value.amount
}

const handleRecharge = () => {
  if (!rechargeForm.value.phone) {
    ElMessage.warning('请输入手机号码')
    return
  }
  console.log('话费充值：', rechargeForm.value)
  ElMessage.success('充值请求已提交')
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部信息栏 */
.top-bar {
  background-color: #f3f3f3;
  border-bottom: 1px solid #e0e0e0;
  font-size: 12px;
  color: #666;
}

.top-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.delivery-area {
  display: flex;
  align-items: center;
  gap: 5px;
}

.location-selector {
  cursor: pointer;
  color: #409eff;
}

.location-panel {
  padding: 15px;
  width: 300px;
}

.location-panel h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
}

.province-group {
  display: flex;
  margin-bottom: 8px;
}

.letter {
  width: 20px;
  font-weight: bold;
}

.provinces {
  flex: 1;
}

.province-item {
  margin-right: 15px;
  cursor: pointer;
  color: #409eff;
}

.province-item:hover {
  text-decoration: underline;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.divider {
  color: #ccc;
}

.social-link {
  margin: 0 3px;
}

/* 主要头部区域 */
.main-header {
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
}

.logo {
  height: 60px;
}

.search-section {
  flex: 1;
}

.search-input {
  max-width: 500px;
}

.hot-keywords {
  margin-top: 8px;
  display: flex;
  gap: 10px;
}

.hot-keywords .el-link {
  font-size: 12px;
}

/* 购物车样式 */
.cart-section {
  position: relative;
}

.cart-container {
  position: relative;
  cursor: pointer;
}

.cart-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #333;
}

.cart-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  padding: 15px;
}

.cart-empty {
  text-align: center;
  color: #666;
  padding: 20px;
}

.cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

.cart-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-image img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
  margin-left: 10px;
}

.item-name {
  font-size: 12px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-price {
  font-size: 12px;
}

.price {
  color: #ff4e00;
  font-weight: bold;
}

.cart-summary {
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  margin-top: 10px;
}

.total-price {
  text-align: right;
  margin-bottom: 10px;
  font-size: 14px;
}

.checkout-btn {
  width: 100%;
}

/* 导航栏 */
.navigation-bar {
  background: linear-gradient(to right, #ff6b6b, #ff8e53);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.category-nav {
  width: 200px;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 20px;
  color: white;
  background-color: rgba(0,0,0,0.1);
  cursor: pointer;
  font-weight: bold;
}

.category-dropdown {
  width: 200px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-nav {
  flex: 1;
}

.main-nav .el-menu-item {
  color: white !important;
  border-bottom: 2px solid transparent !important;
}

.main-nav .el-menu-item:hover {
  background-color: rgba(255,255,255,0.1) !important;
  border-bottom-color: white !important;
}

.main-nav .el-menu-item a {
  color: inherit;
  text-decoration: none;
}

.promotion-banner {
  padding: 15px 20px;
  background-color: rgba(255,255,255,0.1);
  color: white;
  font-weight: bold;
  border-radius: 4px;
  margin-right: 20px;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.main-carousel {
  border-radius: 8px;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 侧边栏 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child {
  border-bottom: none;
}

.news-title {
  flex: 1;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recharge-form .el-form-item {
  margin-bottom: 15px;
}

.recharge-price {
  color: #ff4e00;
  font-weight: bold;
  margin-left: 10px;
}

.recharge-btn {
  width: 100%;
}
</style>
